<template>
  <!-- 页头 -->
  <!-- <header>
    <div class="language">
      <img :src="item.label" v-for="item in initData.language" :key="item" @click="toggleLanguage(item)" alt="" />
    </div>
  </header> -->
  <!-- 页面主体 -->
  <div class="content">
    <!-- 企业荣誉 -->
    <section class="section ct_honor">
      <div class="honor">
        <h2 class="part_title">
          <a href="index" v-t="{ path: 'section.honor' }"></a>
        </h2>
        <div id="honor_lunbo">
          <div id="lunbo_begin">
            <img :src="item" v-for="item in initData.lunboImg" :key="item" alt=""/>
          </div>
          <div id="lunbo_end"></div>
        </div>
      </div>
    </section>
    <!-- 主要客户 -->
    <section class="section ct_partner">
      <div class="partner">
        <h2 class="part_title" >
          <a href="index" v-t="{ path: 'section.partner.title' }"></a>
        </h2>
        <div class="partner_list">
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/fengtian.png" alt="" />
            <b >{{ $tc('section.partner.firstRow', 0) }}</b>
          </div>
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/tongyong.png" alt="" />
            <b>{{ $tc('section.partner.firstRow', 1) }}</b>
          </div>
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/haila.png" alt="" />
            <b>{{ $tc('section.partner.firstRow', 2) }}</b>
          </div>
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/zhongtai.png" alt="" />
            <b>{{ $tc('section.partner.secondRow', 0) }}</b>
          </div>
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/bentian.png" alt="" />
            <b>{{ $tc('section.partner.secondRow', 1) }}</b>
          </div>
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/fute.png" alt="" />
            <b>{{ $tc('section.partner.secondRow', 2) }}</b>
          </div>
          <div class="list">
            <img src="@/assets/images/index/biaozhi.png" alt="" />
            <b>{{ $tc('section.partner.thirdRow', 0) }}</b>
          </div>
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/aixin.png" alt="" />
            <b>{{ $tc('section.partner.thirdRow', 1)}}</b>
          </div>
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/shuixing.png" alt="" />
            <b>{{ $tc('section.partner.thirdRow', 2) }}</b>
          </div>
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/baoshijie.png" alt="" />
            <b>{{ $tc('section.partner.fourRow', 0) }}</b>
          </div>
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/philips.png" alt="" />
            <b>{{ $tc('section.partner.fourRow', 2) }}</b>
          </div>
          <div class="list" style="display: inline;">
            <img src="@/assets/images/index/c_logo_ci_cn.png" alt="" />
            <b>{{ $tc('section.partner.fifthRow', 0) }}</b>
          </div>
        </div>
      </div>
    </section>
    <!-- 企业文化 -->
    <section class="section ct_culture">
      <div class="culture">
        <h2 class="part_title">
          <a href="index" v-t="{ path: 'section.culture' }"></a>
        </h2>
        <div class="culture-nav">
          <div v-for="item in initData.cultureImg" :key="item">
            <img :src="item" alt="">
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import { useI18n} from 'vue-i18n'
import { useStore } from 'vuex'
export default {
  name: 'Index',
  setup() {
    onMounted(() => {
      ScrollImgLeft();
    })

    const initData = reactive({
      language: [
        {label: require('@/assets/images/index/中国.jpg'), value: 'zh-CN'},
        {label: require('@/assets/images/index/美国.jpg'), value: 'en-US'},
        {label: require('@/assets/images/index/德国.jpg'), value: 'de-DE'}
      ],
      lunboImg: [
        require('@/assets/images/index/img1.png'),
        require('@/assets/images/index/img2.png'),
        require('@/assets/images/index/img3.png'),
        require('@/assets/images/index/img4.png'),
        require('@/assets/images/index/img5.png'),
        require('@/assets/images/index/img6.png'),
        require('@/assets/images/index/img7.png')
      ],
      cultureImg: [
        require("@/assets/images/index/企业文化4.png"),
        require("@/assets/images/index/企业文化7.png"),
        require("@/assets/images/index/企业文化9.png"),
        require("@/assets/images/index/企业文化8.png"),
        require("@/assets/images/index/企业文化5.png"),
        require("@/assets/images/index/企业文化6.png"),
        require("@/assets/images/index/企业文化2.png"),
        require("@/assets/images/index/企业文化3.png"),
        require("@/assets/images/index/企业文化1.png")
      ]
    })

    function ScrollImgLeft() {
      let speed = 30;
      let MyMar = null;
      let lunbo_begin = document.getElementById("lunbo_begin");
      let lunbo_end = document.getElementById("lunbo_end");
      let honor_lunbo = document.getElementById("honor_lunbo");
      console.log(lunbo_begin, lunbo_end, honor_lunbo);
      lunbo_end.innerHTML = lunbo_begin.innerHTML;

      function Marquee() {
        if (lunbo_end.offsetWidth - honor_lunbo.scrollLeft <= 0)
          honor_lunbo.scrollLeft -= lunbo_begin.offsetWidth;
        else honor_lunbo.scrollLeft++;
      }
      MyMar = setInterval(Marquee, speed);
      honor_lunbo.onmouseover = function () {
        clearInterval(MyMar);
      };
      honor_lunbo.onmouseout = function () {
        MyMar = setInterval(Marquee, speed);
      };
    }

    const { locale } = useI18n()
    const store = useStore()
    const toggleLanguage = (item) => {
      console.log('----I18n----', locale.value, item, '=====', locale);
      locale.value = item.value
      console.log('--store--', store);
      store.commit('setLanguage', locale)
    }

    const currentPage = ref(window.location.hash)

    window.addEventListener('hashchange', () => {
      currentPage.value = window.location.hash
    })

    return { initData, ScrollImgLeft, toggleLanguage };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/index";
</style>